<template>
  <div class="warn-current pager-container">
    <!--查询条件-->
    <div class="pager-container-inner">
      <!--顶部操作-->
      <div class="btn-wrap"></div>
      <!--表单查询项-->
      <bs-form form-type="query" :model="queryForm">
        <bs-form-item label="主机">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="级别">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="告警信息">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item class="max-form-item" label="最后一次告警时间" label-width="130px">
          <div>
            <el-checkbox></el-checkbox>
            <el-date-picker type="daterange" v-model="queryForm.b"></el-date-picker>
          </div>
          <div>
            <el-checkbox>最近</el-checkbox>
            <el-input-number v-model="queryForm.c"></el-input-number>
            <el-select style="width: 100px;" v-model="queryForm.b"></el-select>
          </div>
        </bs-form-item>
        <bs-form-item class="form-item-btns">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </bs-form-item>
      </bs-form>
      <!--表格-->
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
  </div>
  <MaskDetail ref="detailRef"></MaskDetail>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import BsTable from '@/components/table/BsTable.vue'
import MaskDetail from './components/mask/MaskDetail.vue'

const detailRef = ref()

const tableRef = ref()
const tableData = ref<any[]>([{}])
const queryForm = reactive<Record<string, any>>({
})

const columns:ColumnItem[] = [
  {
    label: '级别',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '主机',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '告警信息',
    prop: 'name',
    fixed: 'left',
    minWidth: 180
  },
  {
    label: '告警时间',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '屏蔽规则到期时间',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '状态',
    prop: 'name',
    fixed: 'left',
    width: 60
  },
  {
    label: '屏蔽备注',
    prop: 'name',
    fixed: 'left',
    width: 80
  },
  {
    label: '查看',
    prop: '',
    fixed: 'right',
    width: 180,
    bodyOptions: {
      type: 'button',
      bind (row, _index) {          
        return {
          buttons: [{
            text: '屏蔽详情',
            onClick: () => {
              detailRef.value.open(row)
            }
          }]
        }
      }
    }
  }
]

const getList = async () => {
  return {
    total: 1
  }
}

</script>
<style lang="scss" scoped>
@import "./scss/list.scss";
</style>
